<template>
    <div class="circle">
        <div class="circle-item" @click="show = !show">
            <ul v-if="show">
                <router-link tag="li" to="/myview"><van-icon color="#fffefe" sizr="15px" name="user-o" /></router-link>
                <router-link tag="li" to="/cart"><van-icon color="#fffefe" sizr="15px" name="shopping-cart-o" /></router-link>
                <router-link tag="li" to="/"><van-icon color="#fffefe" sizr="15px" name="wap-home-o" /></router-link>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            imgPath: require("../assets/image/opencli.gif"),
        };
    },

    methods: {},
};
</script>

<style lang="scss" scoped>
.circle-item {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: url("../assets/image/opencli.gif") no-repeat center center/ cover;
    transform: rotate(90deg);

    ul {
        height: 150px;
        width: 100%;
        background: #f44939;
        border-radius: 20px;
        transform: translateY(60px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 10px;
        li {
            width: 43px;
            height: 43px;
            line-height: 43px;
            margin-bottom: 10px;
            transform: rotate(-90deg);
        }
    }
}
</style>
